<template>
  <div class="container">
    <svg class="icon" width="50px" height="50.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path :fill="color" d="M512 938.4C276.7 938.4 85.3 747 85.3 511.8S276.7 85.1 512 85.1s426.7 191.4 426.7 426.7S747.3 938.4 512 938.4z m0-775.7c-192.5 0-349.1 156.6-349.1 349.1S319.5 860.9 512 860.9s349.1-156.6 349.1-349.1S704.5 162.7 512 162.7z"  />
      <path :fill="color" d="M512 205.4l128 128H384l128-128z m0 612.8l128-128H384l128 128zM205.6 511.8l128-128v256l-128-128z m612.8 0l-128-128v256l128-128z"  />
    </svg>
    <span class="name">{{deviceName}}</span>
  </div>

</template>

<script>
export default {
  name: "ControllerDevice",
  props: {
    color: {
      type: String,
      default: "#A9A9A9", // 默认颜色:深灰色
    },
    deviceName:{
      type: String,
      default: "控制器"
    },
  },
}
</script>

<style scoped>
.container{
  width: 50px;
}
.name{
  display: flex;
  justify-content: center;
  font-size: 10px;
}
</style>


